<template>
  <div :class="['works-avatar', { 'is-active': active }]">
    <img :src="avatar" alt="" class="avatar-iamge" />
    <div class="works-name">{{ name ?? '-' }}</div>
    <el-icon class="avatar-remove" title="删除" :size="18" @click.stop="$emit('remove')"><CloseBold /></el-icon>
  </div>
</template>

<script lang="ts">
import { CloseBold } from '@element-plus/icons-vue'

export default defineComponent({
  name: 'WorksAvatar',
  components: { CloseBold },
  props: {
    avatar: {
      type: String,
    },
    name: {
      type: String,
    },
    active: {
      type: Boolean,
      default: false,
    },
  },
  emits: ['remove']
})
</script>

<style lang="scss" scoped>
.works-avatar {
  display: flex;
  align-items: center;
  column-gap: 10px;
  padding: 10px;
  line-height: 1;
  cursor: pointer;
  &:hover {
    background-color: #e5e5e5;

    .avatar-remove {
      visibility: visible
    }
  }

  &.is-active {
    background-color: pink;
  }

  .avatar-iamge {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    overflow: hidden;
    object-fit: cover;
  }

  .works-name {
    flex: 1;
    font-size: 18px;
  }

  .avatar-remove {
    cursor: pointer;
    visibility: hidden;
  }
}
</style>
